<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Js_button</title>
    <style>
    button{
        width: 20px;
        height: 20px;
        background-color: red;
    }
    </style>
    <script>
        /**文档就绪函数*/
        window.onload = function() {
            /**动态绑定函数（添加事件监听器函数）**/
            document.getElementById("button1").addEventListener("click", function () {
                document.getElementById("1").style.visibility="hidden";
                document.getElementById("2").style.visibility="visible";
            });
            document.getElementById("button2").addEventListener("click", function () {
                document.getElementById("2").style.visibility="hidden";
                document.getElementById("1").style.visibility="visible";
            });
        }
    </script>
</head>
<body>
<button id="button1"> </button>
<button id="button2"> </button>
<div id="1">按钮1</div>
<div id="2">按钮2</div>
</body>
</html>